import { Button, Form, Input } from 'antd';
import { Login } from 'api/teacher';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import teaherStore from 'store/teacher';
const { Item } = Form;

export default () => {
    const nav = useNavigate();
    /**
     * 登录loading
     */
    const [loading, setLoading] = useState(false);

    /**
     * 登录
     */
    const login = async (values) => {
        setLoading(true);
        try {
            const teacher = await Login(values);
            teaherStore.setTeacher(teacher);
            nav('/');
        } catch (error) {
            console.log(error);
        }
        setLoading(false);
    }

    return <div>
        <h1>登录</h1>
        <Form onFinish={login} labelCol={{ style: { width: 80 } }} autoComplete="off">
            <Item rules={[{ required: true, message: '用户名不能为空' }, { min: 2, max: 20, message: '用户名长度为2-20位' }]} label="用户名" name="username">
                <Input maxLength={20} />
            </Item>
            <Item label="密码" name="password" rules={[{ required: true, message: '密码不能为空' }, { min: 2, max: 20, message: '密码长度为2-20位' }]}>
                <Input type="password" maxLength={20} />
            </Item>
            <Item>
                <Button loading={loading} type="primary" htmlType="submit">登录</Button>
                <Button htmlType="reset">重置</Button>
            </Item>
        </Form>
    </div>
}